<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一润魔方</title>
		<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
		<link rel="stylesheet" href="css/font-awesome.min.css" />
	</head>
	<body style="background: url(img/664406863929571507.png);background-size: cover;margin: 0;">
		<div class="cont" style="width: 60%;margin: 10% auto;text-align: center;">
			<div style="float: left;width: 65%;height: 100%;background: url(img/loginbgr.png);background-size: 100% 100%;">
				<img style="margin-top: 15%;width: 23%;" src="img/219763293776457606.png"/>
			</div>
			<div style="width: 35%;background: #fff;float: right;height: 100%;position: relative;">
				<div class="loginbox">
					<div style="width: 100%;padding-top: 20%;padding-bottom: 50px;">WELCOME</div>
					<div class="inputdiv">
						<i class="fa fa-user-o"></i>
						<input type="text" name="username" id="acountipt" value="" placeholder="请输入用户名"/><br />
					</div>
					<div class="inputdiv">
						<i class="fa fa-lock"></i>
						<input type="password" name="password" id="passwordipt" value="" placeholder="请输入密码" />
					</div>
					<div id="loginbtn" class="longinbtn">登&nbsp;&nbsp;&nbsp;录</div>
				</div>
				<div class="selectbox" style="display: none;">
					<div style="width: 100%;padding-top: 20%;padding-bottom: 40px;">SELECT A BOARD</div>
					<div class="inputdiv" style="height: 40%;">
						<p class="selectdiv" onclick="window.location.href='http://222.79.247.164:18091/rjyingyan/html51/wlMapMonitor.html'">仁建鹰眼</p>
						<p class="selectdiv" onclick="window.location.href='index.html'">安通物流外贸部数据中心</p>
						<p class="selectdiv" onclick="window.location.href='yirun.html'">一润供应链看板</p>
						<p class="selectdiv" onclick="window.location.href='board3.html'">安通物流主看板</p>
					</div>
					<div id="rtnbtn" class="longinbtn">返回</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</body>
	
	<script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script>
	<script src="../../../component/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../../../js/seajs/sea.js"></script>
	<script type="text/javascript" src="../../../js/seajs/seajs-text.js"></script>
	<script type="text/javascript" src="../../../js/seajs/seajs-css.js"></script>
	<script type="text/javascript" src="../../../js/bord/config.js"></script>
	<script type="text/javascript">
		seajs.use('./login', function(login) {
			login.init();
		});
	</script>
</html>
<style type="text/css">
	.clear{
		clear: both;
	}
	.inputdiv{
		position: relative;width: 60%;margin: 0 auto;
	}
	.inputdiv .fa{
		position: absolute;right: 10px;top: 5px;
		color: #666;
	}
	input{
		outline: none;
		background: none;
		border: none;
		color: #666;
		margin-bottom: 30px;
		height: 30px;width: 100%;
		border-bottom: 2px solid #666666;
	}
	input:focus{
		outline: none;
		border: none;
		color: #0099FF;
		border-bottom: 2px solid #0099FF;
		transition: border-bottom 0.4s ease-in-out;
	}
	#loginbtn{
		cursor: pointer;
		padding: 8px 0;
		width: 60%;
		margin: 10px auto;
		border-radius: 50px;
		color: #fff;
		background: #ddd;
		/*border: 1px solid #ddd;*/
		/*transition: border-color 0.4s ease-in-out;*/
		transition: background 0.4s ease-in-out;
	}
	#rtnbtn{
		cursor: pointer;
		padding: 10px 0;
		width: 60%;
		margin: 10px auto;
		font-size: 0.7em;
		padding: 8px 0px;
		border-radius: 50px;
		color: #0099FF;
		background: none;
		border: 1px solid #0099FF;
		transition: border-color 0.4s ease-in-out;
		transition: color 0.4s ease-in-out;
	}
	.loginbox,.selectbox{
		width: 100%;height: 100%;
		position: absolute;
	}
	.selectdiv{
		cursor: pointer;
		margin: 0px 0 15px;
		padding: 8px 15px;
		font-size: 0.7em;
		text-align: left;
		border-radius: 30px;
		color: #fff;
		background: #658ac5;
	}
	.alertbox{
		position: absolute;
   		top: 0;
    	width: 100%;
    	height: 500px;
    	color: #47b3ff;
   		text-align: center;
   		/*display: none;*/
	}
	.alertbox p{
		display: block;
    	width: 380px;
    	height: 80px;
   		margin: 300px auto 0;
    	padding: 50px 0 0 0;
    	background: rgba(23, 45, 80, 0.84);
    	border: 2px solid #47b3ff;
    	border-radius: 8px;
	}
</style>
<script type="text/javascript">
	$(".cont").height($(window).height()*0.55);
	window.onload=function(){
		$("#acountipt").focus();
	};
	$("#passwordipt,#acountipt").bind('input propertychange',function() {
    	if($("#acountipt").val() == "" || $("#passwordipt").val() == ""){
//			$(".longinbtn").css("border-color","#666666");
			$("#loginbtn").css("background","#ddd")
		}else{
//			$(".longinbtn").css("border-color","#0099FF");
			$("#loginbtn").css("background","#658ac5")
		}
    });
    $("input").focus(function(){
    	$(this).siblings(".fa").css("color","#0099FF");
    });
    $("input").blur(function(){
    	$(this).siblings(".fa").css("color","#666666");
    });
	$("#loginbtn").click(function(){
		if($("#acountipt").val() == ""){
			$("#acountipt").focus()
		}else if($("#passwordipt").val() == ""){
			$("#passwordipt").focus()
		}else{
			var account = $("#acountipt").val();
			var password = $("#passwordipt").val();
			$.ajax({
				type:"post",
				url:"/Boardlogin/user/login",
				data:{"account":account,"password":password},
				async:true,
				success:function(data){
					console.log(data);
					if (data.status == -1) {
//						alert(data.msg);
						var alertbox='<div class="alertbox"><p>'+data.msg+'</p></div>';
						$("body").append(alertbox);
						setTimeout(function(){
							$(".alertbox").fadeOut(500).remove();
						},1500);
					} else{
//						alert("success");
						localStorage.setItem("token",data.token);
						$(".loginbox").hide().siblings(".selectbox").fadeIn();
					};
				}
			});
//			$(this).parents(".loginbox").hide().siblings(".selectbox").fadeIn();
		}
	});
	$("#rtnbtn").click(function(){
		$(this).parents(".selectbox").hide().siblings(".loginbox").fadeIn();
	})
	
</script>